<!-- 临时新增术语和缩略语--选择标准 -->
<template>
  <el-dialog
    title="选择标准"
    :visible.sync="open"
    width="1000px"
    append-to-body
    @close="closeDialog"
    class="business-dialog"
    :close-on-click-modal="false"
  >
    <el-form :model="queryParams" ref="queryForm" label-width="100px" size="small" label-suffix=":" :inline="true">
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入标准名称或标准编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item class="btn-group">
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-info">
      <el-table
        id="standardSelectList"
        v-loading="loading"
        :data="list"
        @current-change="handleSelectionChange"
        highlight-current-row
      >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="标准名称" align="left" min-width="160" prop="name" />
        <el-table-column label="标准编号" align="left" min-width="160" prop="code" />
        <el-table-column label="标准状态" align="left" min-width="160" prop="statusLabel" />
      </el-table>
      <el-pagination
        v-show="dataTotal > 0"
        :background="true"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :layout="'total, sizes, prev, pager, next'"
        :page-sizes="[10, 30, 50, 100]"
        :pager-count="7"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="business-pager"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getStandardList } from '@/api/business'
import { MessageBox } from 'element-ui'

export default {
  name: 'TemplateEditModal',
  props: {
    editData: {
      type: Object
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val) {
      this.open = val
    }
  },
  data() {
    return {
      open: this.visible,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: ''
      },
      dataTotal: 0,
      list: [],
      loading: false,
      currentRow: null
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      if (!this.currentRow) {
        return MessageBox.alert('请选择一条标准', '提示', {
          customClass: 'business-dialog'
        })
      }
      this.$emit('onChange', this.currentRow)
      this.open = false
    },
    handleSizeChange(val) {
      if (this.queryParams.pageNum * val > this.dataTotal) {
        this.queryParams.pageNum = 1
      }
      this.handleQuery()
    },
    handleCurrentChange() {
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      getStandardList({
        ...this.queryParams
      })
        .then((res) => {
          this.list = res.data.list
          this.dataTotal = res.data.count
        })
        .finally(() => {
          this.loading = false
        })
    },
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.queryParams.name = ''
      this.queryParams.code = ''
    },
    handleSelectionChange(val) {
      this.currentRow = val
    }
  }
}
</script>
<style scoped>
.dialog,
.el-select-dropdown__item {
  font-family: 'microsoft yahei';
}
</style>
<style>
#standardSelectList .el-table__body tr.current-row > td.el-table__cell {
  color: #fff;
}
</style>
